- type = local_assigns.fetch(:type)
- show_sorting_dropdown = local_assigns.fetch(:show_sorting_dropdown, true)
- disable_target_branch = local_assigns.fetch(:disable_target_branch, false)
- disable_releases = local_assigns.fetch(:disable_releases, false)
- disable_environments = local_assigns.fetch(:disable_environments, false)
- filtered_search_class = local_assigns.fetch(:filtered_search_class, '')
- placeholder = local_assigns[:placeholder] || _('Search or filter results…')
- block_css_class = type != :productivity_analytics ? 'row-content-block second-block' : ''

.issues-filters
  .issues-details-filters.filtered-search-block.gl-flex.gl-flex-col.gl-gap-3{ class: "@lg/panel:gl-flex-row #{block_css_class} #{filtered_search_class}" }
    .gl-flex.gl-flex-col.gl-grow.gl-w-full{ class: "@md/panel:gl-flex-row" }
      = form_tag page_filter_path, method: :get, class: 'filter-form js-filter-form gl-w-full' do
        - if params[:search].present?
          = hidden_field_tag :search, params[:search]
        - if @can_bulk_update
          .check-all-holder.gl-hidden.gl-float-left.gl-mr-3.gl-leading-36{ class: "@sm/panel:gl-block" }
            = render Pajamas::CheckboxTagComponent.new(name: 'check-all-issues', value: nil) do |c|
              - c.with_label do
                %span.gl-sr-only
                  = _('Select all')
        .issues-other-filters.filtered-search-wrapper.gl-flex.gl-flex-col{ class: "@md/panel:gl-flex-row" }
          .filtered-search-box
            - if type != :boards
              - text = tag.span(sprite_icon('history')) + tag.span(_('Recent searches'), class: "gl-sr-only")
              = dropdown_tag(text,
                options: { wrapper_class: "filtered-search-history-dropdown-wrapper",
                toggle_class: "gl-button btn btn-default filtered-search-history-dropdown-toggle-button",
                dropdown_class: "filtered-search-history-dropdown",
                content_class: "filtered-search-history-dropdown-content" }) do
                .js-filtered-search-history-dropdown{ data: { full_path: search_history_storage_prefix } }
            .filtered-search-box-input-container.droplab-dropdown
              .scroll-container
                %ul.tokens-container.list-unstyled
                  %li.input-token
                    %input.form-control.filtered-search{ search_filter_input_options(type, placeholder) }
              #js-dropdown-hint.gl-filtered-search-suggestion-list.dropdown-menu
                %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                  %li.filter-dropdown-item{ data: {hint: "#{'{{hint}}'}", tag: "#{'{{tag}}'}", action: "#{'{{hint === \'search\' ? \'submit\' : \'\' }}'}" } }
                    = render Pajamas::ButtonComponent.new(variant: :link, button_text_classes: 'gl-inline-flex') do
                      -# Encapsulate static class name `{{icon}}` inside #{} to bypass
                      -# haml lint's ClassAttributeWithStaticValue
                      %svg
                        %use{ 'xlink:href': "#{'{{icon}}'}" }
                      {{ formattedKey }}
              #js-dropdown-operator.gl-filtered-search-suggestion-list.dropdown-menu
                %ul.filter-dropdown{ data: { dropdown: true, dynamic: true } }
                  %li.filter-dropdown-item{ data: { value: "{{ title }}" } }
                    = render Pajamas::ButtonComponent.new(variant: :link, button_text_classes: 'gl-inline-flex gl-justify-between gl-w-full') do
                      {{ title }}
                      %span.gl-text-subtle
                        {{ help }}
              #js-dropdown-author.gl-filtered-search-suggestion-list.dropdown-menu
                - if current_user
                  %ul{ data: { dropdown: true } }
                    = render 'shared/issuable/user_dropdown_item',
                      user: current_user
                %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                  = render 'shared/issuable/user_dropdown_item',
                    user: User.new(username: '{{username}}', name: '{{name}}'),
                    avatar: { lazy: true, url: '{{avatar_url}}' }
              #js-dropdown-assignee.gl-filtered-search-suggestion-list.dropdown-menu
                - if type != :issues_analytics
                  %ul{ data: { dropdown: true } }
                    %li.filter-dropdown-item{ data: { value: 'None' } }
                      = render Pajamas::ButtonComponent.new(variant: :link) do
                        = _('None')
                    %li.filter-dropdown-item{ data: { value: 'Any' } }
                      = render Pajamas::ButtonComponent.new(variant: :link) do
                        = _('Any')
                    %li.divider.droplab-item-ignore
                    - if current_user
                      = render 'shared/issuable/user_dropdown_item',
                        user: current_user
                %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                  = render 'shared/issuable/user_dropdown_item',
                    user: User.new(username: '{{username}}', name: '{{name}}'),
                    avatar: { lazy: true, url: '{{avatar_url}}' }
              #js-dropdown-reviewer.gl-filtered-search-suggestion-list.dropdown-menu
                %ul{ data: { dropdown: true } }
                  %li.filter-dropdown-item{ data: { value: 'None' } }
                    = render Pajamas::ButtonComponent.new(variant: :link) do
                      = _('None')
                  %li.filter-dropdown-item{ data: { value: 'Any' } }
                    = render Pajamas::ButtonComponent.new(variant: :link) do
                      = _('Any')
                  %li.divider.droplab-item-ignore
                  - if current_user
                    = render 'shared/issuable/user_dropdown_item',
                      user: current_user
                %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                  = render 'shared/issuable/user_dropdown_item',
                    user: User.new(username: '{{username}}', name: '{{name}}'),
                    avatar: { lazy: true, url: '{{avatar_url}}' }

              = render_if_exists 'shared/issuable/approver_dropdown'
              = render_if_exists 'shared/issuable/approved_by_dropdown'
              = render_if_exists 'shared/issuable/merge_user_dropdown'

              #js-dropdown-milestone.gl-filtered-search-suggestion-list.dropdown-menu
                - if type != :issues_analytics
                  %ul{ data: { dropdown: true } }
                    %li.filter-dropdown-item{ data: { value: 'None' } }
                      = render Pajamas::ButtonComponent.new(variant: :link) do
                        = _('None')
                    %li.filter-dropdown-item{ data: { value: 'Any' } }
                      = render Pajamas::ButtonComponent.new(variant: :link) do
                        = _('Any')
                    %li.filter-dropdown-item{ data: { value: 'Upcoming' } }
                      = render Pajamas::ButtonComponent.new(variant: :link) do
                        = _('Upcoming')
                    %li.filter-dropdown-item{ data: { value: 'Started' } }
                      = render Pajamas::ButtonComponent.new(variant: :link) do
                        = _('Started')
                    %li.divider.droplab-item-ignore
                %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                  %li.filter-dropdown-item
                    = render Pajamas::ButtonComponent.new(variant: :link, button_options: { class: 'js-data-value' }) do
                      {{title}}
              = render_if_exists 'shared/issuable/filter_iteration', type: type
              - unless disable_releases
                #js-dropdown-release.gl-filtered-search-suggestion-list.dropdown-menu
                  %ul{ data: { dropdown: true } }
                    %li.filter-dropdown-item{ data: { value: 'None' } }
                      = render Pajamas::ButtonComponent.new(variant: :link) do
                        = _('None')
                    %li.filter-dropdown-item{ data: { value: 'Any' } }
                      = render Pajamas::ButtonComponent.new(variant: :link) do
                        = _('Any')
                    %li.divider.droplab-item-ignore
                  %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                    %li.filter-dropdown-item
                      = render Pajamas::ButtonComponent.new(variant: :link, button_options: { class: 'js-data-value' }) do
                        {{title}}
              #js-dropdown-label.gl-filtered-search-suggestion-list.dropdown-menu
                %ul{ data: { dropdown: true } }
                  %li.filter-dropdown-item{ data: { value: 'None' } }
                    = render Pajamas::ButtonComponent.new(variant: :link) do
                      = _('None')
                  %li.filter-dropdown-item{ data: { value: 'Any' } }
                    = render Pajamas::ButtonComponent.new(variant: :link) do
                      = _('Any')
                  %li.divider.droplab-item-ignore
                %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                  %li.filter-dropdown-item
                    = render Pajamas::ButtonComponent.new(variant: :link, button_text_classes: 'gl-inline-flex gl-gap-3') do
                      %span.dropdown-label-box.gl-m-0{ style: 'background: {{color}}' }
                      %span.label-title.js-data-value
                        {{title}}
              #js-dropdown-my-reaction.gl-filtered-search-suggestion-list.dropdown-menu
                %ul{ data: { dropdown: true } }
                  %li.filter-dropdown-item{ data: { value: 'None' } }
                    = render Pajamas::ButtonComponent.new(variant: :link) do
                      = _('None')
                  %li.filter-dropdown-item{ data: { value: 'Any' } }
                    = render Pajamas::ButtonComponent.new(variant: :link) do
                      = _('Any')
                  %li.divider.droplab-item-ignore
                %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                  %li.filter-dropdown-item
                    = render Pajamas::ButtonComponent.new(variant: :link, button_text_classes: 'gl-inline-flex gl-gap-1') do
                      %gl-emoji
                      %span.js-data-value
                        {{name}}
              #js-dropdown-wip.gl-filtered-search-suggestion-list.dropdown-menu
                %ul.filter-dropdown{ data: { dropdown: true } }
                  %li.filter-dropdown-item{ data: { value: 'yes', capitalize: true } }
                    = render Pajamas::ButtonComponent.new(variant: :link) do
                      = _('Yes')
                  %li.filter-dropdown-item{ data: { value: 'no', capitalize: true } }
                    = render Pajamas::ButtonComponent.new(variant: :link) do
                      = _('No')
              #js-dropdown-confidential.gl-filtered-search-suggestion-list.dropdown-menu
                %ul.filter-dropdown{ data: { dropdown: true } }
                  %li.filter-dropdown-item{ data: { value: 'yes', capitalize: true } }
                    = render Pajamas::ButtonComponent.new(variant: :link) do
                      = _('Yes')
                  %li.filter-dropdown-item{ data: { value: 'no', capitalize: true } }
                    = render Pajamas::ButtonComponent.new(variant: :link) do
                      = _('No')
              - unless disable_target_branch
                #js-dropdown-target-branch.gl-filtered-search-suggestion-list.dropdown-menu
                  %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                    %li.filter-dropdown-item
                      = render Pajamas::ButtonComponent.new(variant: :link, button_options: { class: 'gl-font-monospace js-data-value' }) do
                        {{title}}
                #js-dropdown-source-branch.gl-filtered-search-suggestion-list.dropdown-menu
                  %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                    %li.filter-dropdown-item
                      = render Pajamas::ButtonComponent.new(variant: :link, button_options: { class: 'gl-font-monospace js-data-value' }) do
                        {{title}}
              - unless disable_environments
                #js-dropdown-environment.gl-filtered-search-suggestion-list.dropdown-menu
                  %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                    %li.filter-dropdown-item
                      = render Pajamas::ButtonComponent.new(variant: :link, button_options: { class: 'js-data-value' }) do
                        {{title}}

              = render_if_exists 'shared/issuable/filter_weight', type: type
              = render_if_exists 'shared/issuable/filter_epic', type: type

            = render Pajamas::ButtonComponent.new(category: :tertiary, size: :small, icon: 'clear', icon_classes: "clear-search-icon", button_options: { class: 'clear-search hidden gl-self-center gl-mr-1 has-tooltip', title: _('Clear') })
    .filter-dropdown-container.gl-flex.gl-flex-col.gl-items-start{ class: "@md/panel:gl-flex-row" }
      - if type != :productivity_analytics && show_sorting_dropdown
        = render 'shared/issuable/sort_dropdown'
